<template>
  <div class="warp">
    <div class="aside" v-if="isFoldAside"></div>
    <div ref="mapContainer" id="mapContainer"></div>
  </div>

  <activity-panel>
    <el-button @click="changeViewportSize">修改viewport尺寸</el-button>
    <el-button @click="isFoldAside = !isFoldAside">折叠侧边栏</el-button>
  </activity-panel>
</template>

<script setup>
import { onMounted, nextTick, ref } from "vue";
import useInitMap from "@/utils/ol/useInitMap";

useInitMap({
  target: "mapContainer",
  zoom: 7,
  onLoadEnd: onLoadEnd,
});

function onLoadEnd(map) {}

const mapContainer = ref(null);
const isFoldAside = ref(true);
onMounted(() => {
  // let resizeObserver = new ResizeObserver(() => {
  //   console.log("updata map size 3");
  //   window.map && window.map.updateSize();
  // });
  // resizeObserver.observe(mapContainer.value);
});

function changeViewportSize() {
  // mapContainer.value.style.width = "500px";
  mapContainer.value.style.height = "500px";
}
</script>

<style scoped>
.warp {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.aside {
  width: 200px;
  height: 100%;
  background-color: pink;
}
#mapContainer {
  flex: 1;
  height: 100%;
}
</style>
